<script setup>
import { ref, defineOptions } from 'vue'
import { commonFunc } from '@/api/getAxios_1'

// 重磅推荐
const Heavyrecom = ref([])
commonFunc('8571','3').then((res) => {
    console.log(res);
    Heavyrecom.value = res.data.data.list
})
</script>
<template>
    <div class="current-main">
        <h1 class="recommend">
            <span>重磅推荐</span>
        </h1>
        <ul>
            <li v-for="item in Heavyrecom" @click="$router.push(`/BookInfo?storyId=${item.storyId}`)">
                <div class="coverImg">
                    <img :src="item.story.smallCover" alt="">
                </div>
                <div class="msg">
                <p class="name">{{ item.story.name }}</p>
                <p class="detail">{{ item.story.introduce }}</p>
                <p class="type">
                        <span class="author-type">{{ item.story.author }} | {{ item.story.type }}</span>
                        <span class="fireValue">{{ (item.story.fireValue / 10000).toFixed(1) + '万人气值' }}</span>
                    </p>
                </div>
            </li>
            <li>
                <!-- <div class="little" v-for="(data, index) in suspense"> -->
                <!-- <template v-if="index !== 0">
                                    <img :src="data.story.smallCover" alt="">
                                    <p class="title">{{ data.story.name }}</p>
                                </template> -->
                <!-- </div> -->
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
.current-main {
    height: 158vw;
    background-color: #fff;
    margin-bottom: 15px;

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 20px 0px;
        position: relative;

        span.jump {
            position: absolute;
            right: 0;
            font-size: 26px;
            margin-right: 20px;
        }
    }
}

ul {
    display: flex;
    flex-direction: column;

    li {
        padding: 10px;
        height: 40vw;
        display: flex;

        .coverImg {

            border-radius: 10px;
            width: 30vw;
            height: 40vw;

            img {
                border-radius: 10px;
                box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
                width: 100%;
                height: 100%;
            }
        }

        .msg {
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 68vw;
            margin-left: 10px;

            .name {
                font-size: 18px;

            }

            .detail {
                display: -webkit-box;
                text-align: left;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #939296;
                font-size: 14px;
            }

            .type {

                color: #939296;
                font-size: 12px;

                .fireValue {
                    margin-left: 20px;
                    color: #ccae59;
                }
            }


        }

    }
}
</style>